import React from "react";
import {Platform, Switch, Text, TouchableOpacity, View} from "react-native";
import chjStyle from "../../../CustomStyle";
import CustomStyle from "../../../../common/style/CustomStyle";

export default class SwitchTextItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOn: this.props.object.value == this.props.onValue,
        };
    }

    render() {
        if (Platform.OS == 'android') {
            var switchStyle = {
                top: chjStyle.getActualSizeInVertical(30),
                right: chjStyle.getActualSizeInHorizontal(30),
            };
        } else {
            var switchStyle = {
                top: chjStyle.getActualSizeInVertical(30),
                left: chjStyle.getActualSizeInHorizontal(600),
            };
        }
        const object = this.props.object;
        return (
            <View style={[chjStyle.textItem]}>
                <TouchableOpacity
                    style={{flex: 1}}
                >
                    <Text
                        style={{
                            position: 'absolute',
                            color: '#303030',
                            textAlign: 'left',
                            backgroundColor: 'rgba(0, 0, 0, 0)',
                            fontSize: chjStyle.getActualFontSize(30),
                            top: chjStyle.getActualSizeInVertical(40),
                            left: chjStyle.getActualSizeInHorizontal(40),
                            width: chjStyle.getActualSizeInHorizontal(440),
                        }}>{object.name}</Text>

                    <Text style={{
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'right',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(40),
                        right: chjStyle.getActualSizeInHorizontal(180),
                        width: chjStyle.width,
                    }}>{object.value}</Text>

                    <Switch
                        style={switchStyle}
                        onValueChange={this.onValueChange.bind(this)}
                        onTintColor='green'
                        tintColor='gray'
                        value={this.state.isOn}
                    />

                </TouchableOpacity>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(25),
                    color: 'red',
                    marginLeft: CustomStyle.getActualSizeInHorizontal(40),
                }]}>{this.state.isOn && object.exInfo ? object.exInfo : ''}</Text>
            </View>
        );
    }

    onValueChange(value) {
        this.props.object.value = value ? this.props.onValue : this.props.offValue;
        this.setState(
            {isOn: !this.state.isOn}
        );
        if (this.props.onValueChangedListener) {
            this.props.onValueChangedListener(value);
        }
    }
}
